<script setup lang='ts'>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
var inputData = [
  { value: 90, name: "展现" },
  { value: 80, name: "166%" },
  { value: 60, name: "148%" },
  { value: 90, name: "53%" },
  { value: 70, name: "27%" },
  { value: 70, name: "19%" },
];
var ratio = 100;
var data = [];
for (var i = 1; i < inputData.length; ++i) {
  ratio *= inputData[i].value / 100;
  data.push({
    value: ratio,
    name: inputData[i].name,
  });
}
var option = ref({
  legend: {
    data: ["展现", "166%", "148%", "53%", "27%", "19%"],
    itemGap: 5,
    textStyle: {
      color: "#fff", // 修改图例文字的颜色为红色
    },
  },

  series: [
    {
      name: "漏斗图",
      type: "funnel",
      left: "10%",
      top: 60,
      bottom: 60,
      width: "80%",
      height:'70%',
      min: 0,
      max: 100,
      minSize: "0%",
      maxSize: "100%",
      sort: "none",
      gap: 2,
      label: {
        show: true,
        position: "inside",
      },
      emphasis: {
        label: {
          fontSize: 20,
        },
      },
      data: data,
    },
  ],
});
let warp = ref("");
let myChart
onMounted(() => {
  myChart = echarts.init(warp.value);
  option && myChart.setOption(option.value);
 
});
window.addEventListener('resize', function() {
    myChart.resize();
  });
</script>
<template>
  <div ref="warp" style="width: 100%; height: 100%;margin-top: 0.05rem;"></div>
</template>

<style></style>